﻿<template>
  <my-container v-loading="pageLoading">
    <!--顶部操作-->
    <template #header>
      <el-form class="ad-form-query" :inline="true" @submit.native.prevent>
        <el-form-item>
          <my-search :fields="fields" @click="onSearch" />
        </el-form-item>
        <el-form-item v-if="checkPermission(['api:admin:slideshow:add'])">
          <el-button type="primary" @click="onAdd">新增</el-button>
        </el-form-item>
        <el-form-item v-if="checkPermission(['api:admin:slideshow:delete'])">
          <my-confirm-button
            :disabled="sels.length === 0"
            :type="'delete'"
            :placement="'bottom-end'"
            :loading="deleteLoading"
            style="margin-left: 0px"
            @click="onBatchDelete"
          >
            <template #content>
              <p>确定要批量删除吗？</p>
            </template>
            批量删除
          </my-confirm-button>
        </el-form-item>
      </el-form>
    </template>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="pageList"
      highlight-current-row
      height="'100%'"
      style="width: 100%; height: 100%"
      @selection-change="onSelsChange"
    >
            <el-table-column type="selection" width="50" />      
      <el-table-column prop="dictionaryName" label="字典类型" />      
      <el-table-column prop="slideshowTypeName" label="轮播图类型" />          
      <el-table-column prop="title" label="标题" />      
      <el-table-column prop="portrait" label="图片">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.portrait"
            :preview-src-list="[scope.row.portrait]"
            lazy
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="expand" label="拓展信息" />      
      <el-table-column prop="sort" label="排序" />      
      <el-table-column prop="description" label="描述" />      
      <el-table-column
        prop="creationTime"
        label="创建时间"
        :formatter="formatCreatedTime"
      />
           
      <el-table-column
        v-if="
          checkPermission([
            'api:admin:slideshow:update',
            'api:admin:slideshow:delete',
          ])
        "
        label="操作"
        width="180"
      >
               
        <template #default="{ $index, row }">
                   
          <el-button
            v-if="checkPermission(['api:admin:slideshow:update'])"
            @click="onEdit($index, row)"
            >编辑</el-button
          >
                   
          <my-confirm-button
            v-if="checkPermission(['api:admin:slideshow:delete'])"
            type="delete"
            :loading="row._loading"
            @click="onDelete($index, row)"
          />
                 
        </template>
             
      </el-table-column>
    </el-table>

    <!--分页-->
    <template #footer>
      <my-pagination
        ref="pager"
        :total="total"
        :checked-count="sels.length"
        @get-page="pageList"
      />
    </template>

    <!-- 添加 -->
    <my-window
      v-if="checkPermission(['api:admin:slideshow:add'])"
      title="添加"
      :visible.sync="addDialogFormVisible"
      @close="closeAddForm"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addFormRules"
        label-width="80px"
        :inline="false"
      >
        <el-form-item label="字典类型" prop="dictionaryId">
          <el-select
            v-model="addForm.dictionaryId"
            placeholder="请选择字典类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in dictionaryCodeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
             
        <el-form-item label="轮播图类型" prop="slideshowType">
          <el-select
            v-model="addForm.slideshowType"
            placeholder="请选择轮播图类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in slideshowTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select> </el-form-item
        >           
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title" auto-complete="off" />
        </el-form-item>
             
        <el-form-item label="图片" prop="portrait">
          <el-upload
            v-loading="avatarLoading"
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="token"
            :show-file-list="false"
            :before-upload="
              () => {
                avatarLoading = true;
              }
            "
            :on-success="onAvatarSuccess"
            :on-error="onAvatarError"
            style="display: inline-block"
          >
            <el-image
              class="el-avatar el-avatar--square"
              :src="addForm.portrait"
              style="height: 90px; width: 90px; line-height: 90px"
            >
            </el-image>
            <div>
              <el-button plain style="width: 90px">
                <i class="el-icon-upload el-icon--left" />上传
              </el-button>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="拓展信息" prop="expand">
          <el-input v-model="addForm.expand" auto-complete="off" />
        </el-form-item>
             
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="addForm.sort"
            :min="0"
            label="排序"
          ></el-input-number>
        </el-form-item>
             
        <el-form-item label="描述" prop="description">
          <el-input v-model="addForm.description" auto-complete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click.native="addDialogFormVisible = false">取消</el-button>
        <my-confirm-button
          type="submit"
          :validate="addFormvalidate"
          :loading="addLoading"
          @click="onAddSubmit"
        />
      </template>
    </my-window>

    <!--编辑窗口-->
    <my-window
      v-if="checkPermission(['api:admin:slideshow:update'])"
      title="编辑"
      :visible.sync="editFormVisible"
      @close="closeEditForm"
    >
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editFormRules"
        label-width="80px"
        :inline="false"
      >
             
        <el-form-item label="字典类型" prop="dictionaryId">
          <el-select
            v-model="editForm.dictionaryId"
            placeholder="请选择字典类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in dictionaryCodeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
             
        <el-form-item label="轮播图类型" prop="slideshowType">
          <el-select
            v-model="editForm.slideshowType"
            placeholder="请选择轮播图类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in slideshowTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select> </el-form-item
        >           
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" auto-complete="off" />
        </el-form-item>
             
        <el-form-item label="图片" prop="portrait">
          <el-upload
            v-loading="avatarLoading"
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="token"
            :show-file-list="false"
            :before-upload="
              () => {
                avatarLoading = true;
              }
            "
            :on-success="onAvatarSuccess"
            :on-error="onAvatarError"
            style="display: inline-block"
          >
            <el-image
              class="el-avatar el-avatar--square"
              :src="editForm.portrait"
              style="height: 90px; width: 90px; line-height: 90px"
            >
            </el-image>
            <div>
              <el-button plain style="width: 90px">
                <i class="el-icon-upload el-icon--left" />上传
              </el-button>
            </div>
          </el-upload>
        </el-form-item>
             
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" auto-complete="off" />
        </el-form-item>
         
        <el-form-item label="拓展信息" prop="expand">
          <el-input v-model="editForm.expand" auto-complete="off" />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="editForm.sort"
            :min="0"
            label="排序"
          ></el-input-number>
        </el-form-item>
             
        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description" auto-complete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <my-confirm-button
          type="submit"
          :validate="editFormvalidate"
          :loading="editLoading"
          @click="onEditSubmit"
        />
      </template>
    </my-window>
  </my-container>
</template>

<script>
import { formatTime, listToTree, getTreeParents } from "@/utils";
import {
  getPageList,
  get,
  add,
  update,
  softDelete,
  batchSoftDelete,
} from "@/api/info/slideshow";
import { getCodeList } from "@/api/admin/dictionary-type";
import MyContainer from "@/components/my-container";
import MyConfirmButton from "@/components/my-confirm-button";
import MySearch from "@/components/my-search";
import MySearchWindow from "@/components/my-search-window";
import MyWindow from "@/components/my-window";

export default {
  name: "slideshow",
  components: {
    MyContainer,
    MyConfirmButton,
    MySearch,
    MySearchWindow,
    MyWindow,
  },
  data() {
    return {
      // 高级查询字段
      fields: [
        { value: "dictionaryId", label: "字典Id", default: true },
        { value: "slideshowType", label: "轮播图类型", default: true },
        { value: "expand", label: "拓展信息", default: true },
        { value: "title", label: "标题", default: true },
        { value: "portrait", label: "图片", default: true },
        { value: "sort", label: "排序", default: true },
        { value: "description", label: "描述", default: true },
        {
          value: "creationTime",
          label: "创建时间",
          type: "date",
          operator: "daterange",
          config: {
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          },
        },
      ],
      dynamicFilter: null,
      pageList: [],
      total: 0,
      sels: [], // 列表选中列
      dictionaryCodeList: [],
      slideshowTypeList: [
        {
          name: "文章",
          value: 1,
        },
        {
          name: "页面",
          value: 2,
        },
        {
          name: "外链",
          value: 3,
        },
      ],
      listLoading: false,
      pageLoading: false,
      editLoading: false,
      addLoading: false,
      deleteLoading: false,
      // 上传图片等待
      avatarLoading: false,
      // 添加界面
      addDialogFormVisible: false,
      // 编辑界面是否显示
      editFormVisible: false,
      editFormRules: {
        dictionaryIdfunctionModule: [
          { required: true, message: "请输入字典Id", trigger: "blur" },
        ],
        slideshowTypefunctionModule: [
          { required: true, message: "请输入轮播图类型", trigger: "blur" },
        ],
        expandfunctionModule: [
          { required: true, message: "请输入拓展信息", trigger: "blur" },
        ],
        titlefunctionModule: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
        portraitfunctionModule: [
          { required: true, message: "请输入图片", trigger: "blur" },
        ],
        sortfunctionModule: [
          { required: true, message: "请输入排序", trigger: "blur" },
        ],
        descriptionfunctionModule: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        lastModificationTimefunctionModule: [
          { required: true, message: "请输入修改时间", trigger: "blur" },
        ],
        creationTimefunctionModule: [
          { required: true, message: "请输入创建时间", trigger: "blur" },
        ],
      },
      addFormRules: {
        dictionaryIdfunctionModule: [
          { required: true, message: "请输入字典Id", trigger: "blur" },
        ],
        slideshowTypefunctionModule: [
          { required: true, message: "请输入轮播图类型", trigger: "blur" },
        ],
        expandfunctionModule: [
          { required: true, message: "请输入拓展信息", trigger: "blur" },
        ],
        titlefunctionModule: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
        portraitfunctionModule: [
          { required: true, message: "请输入图片", trigger: "blur" },
        ],
        sortfunctionModule: [
          { required: true, message: "请输入排序", trigger: "blur" },
        ],
        descriptionfunctionModule: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        lastModificationTimefunctionModule: [
          { required: true, message: "请输入修改时间", trigger: "blur" },
        ],
        creationTimefunctionModule: [
          { required: true, message: "请输入创建时间", trigger: "blur" },
        ],
      },
      // 编辑界面数据
      editForm: {
        id: "",
        dictionaryId: "",
        slideshowType: "",
        expand: "",
        title: "",
        portrait: "",
        sort: "",
        description: "",
        lastModificationTime: "",
        creationTime: "",
      },
      // 添加界面数据
      addForm: {
        id: "",
        dictionaryId: "",
        slideshowType: "",
        expand: "",
        title: "",
        portrait: "",
        sort: "",
        description: "",
        lastModificationTime: "",
        creationTime: "",
      },
    };
  },
  async mounted() {
    await this.onGetPageList();
    await this.onGetCodeList();
  },
  computed: {
    avatar() {
      const path = this.editForm.avatar
        ? process.env.VUE_APP_AVATAR_URL + this.editForm.avatar
        : this.avatarDefault;
      return path;
    },
    // 上传图片路径
    uploadUrl() {
      return process.env.VUE_APP_BASE_API + "/admin/user/avatarupload";
    },
    // 请求令牌
    token() {
      return { Authorization: "Bearer " + this.$store.getters.token };
    },
  },
  methods: {
    formatCreatedTime(row, column, time) {
      return formatTime(time, "YYYY-MM-DD HH:mm");
    },
    // 查询
    onSearch(dynamicFilter) {
      this.$refs.pager.setPage(1);
      this.dynamicFilter = dynamicFilter;
      this.onGetPageList();
    },
    // 显示添加界面
    onAdd() {
      this.addDialogFormVisible = true;
    },
    // 关闭添加
    closeAddForm() {
      this.$refs.addForm.resetFields();
      this.addDialogFormVisible = false;
    },
    // 关闭编辑
    closeEditForm() {
      this.$refs.editForm.resetFields();
      this.editFormVisible = false;
    },
    // 添加验证
    addFormvalidate() {
      let isValid = false;
      this.$refs.addForm.validate((valid) => {
        isValid = valid;
      });
      return isValid;
    },
    // 编辑验证
    editFormvalidate() {
      let isValid = false;
      this.$refs.editForm.validate((valid) => {
        isValid = valid;
      });
      return isValid;
    },
    // 删除验证
    deleteValidate(row) {
      let isValid = true;
      return isValid;
    },
    // 批量删除验证
    batchDeleteValidate() {
      let isValid = true;
      return isValid;
    },
    // 选择
    onSelsChange(sels) {
      this.sels = sels;
    },
    // 上传成功
    onAvatarSuccess(res) {
      this.avatarLoading = false;
      if (!res?.code) {
        if (res.msg) {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
        return;
      }
      this.editForm.portrait = res.data;
      this.addForm.portrait = res.data;
    },
    // 上传失败
    onAvatarError(err, file) {
      this.avatarLoading = false;
      const res = err.message ? JSON.parse(err.message) : {};
      if (!res?.code) {
        if (res.msg) {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      }
    },
    // 获取列表
    async onGetPageList() {
      var pager = this.$refs.pager.getPager();
      const params = {
        ...pager,
        dynamicFilter: this.dynamicFilter,
      };
      this.listLoading = true;
      const res = await getPageList(params);
      this.listLoading = false;
      if (!res?.success) {
        return;
      }
      this.total = res.data.total;
      const data = res.data.list;
      data.forEach((d) => {
        d._loading = false;
      });
      this.pageList = data;
    },
    // 根据Code获取字典
    async onGetCodeList() {
      const res = await getCodeList({ code: "SlideshowCode" });
      if (!res?.success) {
        return;
      }
      this.dictionaryCodeList = res.data;
    },
    // 显示编辑界面
    async onEdit(index, row) {
      this.pageLoading = true;
      const res = await get({ id: row.id });
      this.pageLoading = false;
      if (res && res.success) {
        const data = res.data;
        this.editForm = data;
        this.editFormVisible = true;
      }
    },
    // 添加
    async onAddSubmit() {
      this.addLoading = true;
      const para = _.cloneDeep(this.addForm);
      const res = await add(para);
      this.addLoading = false;

      if (!res?.success) {
        return;
      }
      this.$message({
        message: this.$t("admin.addOk"),
        type: "success",
      });
      this.$refs["addForm"].resetFields();
      this.addDialogFormVisible = false;
      this.onGetPageList();
    },
    // 编辑
    async onEditSubmit() {
      this.editLoading = true;
      const para = _.cloneDeep(this.editForm);
      const res = await update(para);
      this.editLoading = false;

      if (!res?.success) {
        return;
      }

      this.$message({
        message: this.$t("admin.updateOk"),
        type: "success",
      });
      this.$refs["editForm"].resetFields();
      this.editFormVisible = false;
      this.onGetPageList();
    },
    // 批量删除
    async onBatchDelete() {
      const para = { ids: [] };
      para.ids = this.sels.map((s) => {
        return s.id;
      });
      this.deleteLoading = true;
      const res = await batchSoftDelete(para.ids);
      this.deleteLoading = false;

      if (!res?.success) {
        return;
      }

      this.$message({
        message: this.$t("admin.batchDeleteOk"),
        type: "success",
      });

      this.onGetPageList();
    },
    // 删除
    async onDelete(index, row) {
      row._loading = true;
      const para = { id: row.id };
      const res = await softDelete(para);
      row._loading = false;
      if (!res?.success) {
        return;
      }
      this.$message({
        message: this.$t("admin.deleteOk"),
        type: "success",
      });
      this.onGetPageList();
    },
  },
};
</script>

<style lang="scss" scoped>
.my-search ::v-deep .el-input-group__prepend {
  background-color: #fff;
}
</style>
